<template>
    <Fenlei></Fenlei>
    <div class="article-detail" v-if="articles">
        <h2>{{ articles.title }}</h2>
        <div class="article-meta" v-if="articles.author">
            <button style="background-color: #fff;">博文</button> 
            <el-avatar :src="articles.author.avatar ||'/default-avatar.png' "
            size="40"class="mr-2"></el-avatar>
            <span>作者:{{ articles.author.username }}</span> |
            <span>发表时间:{{ articles.create_time }}</span> |
            <span>当前文章标签:
                <span v-for="(tag,index) in articleTags" :key="index">
                    {{ tag.title }}
                    <span v-if="index !=articleTags.length -1">,</span>
                </span>
            </span>
        </div>
        <div>
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.MSBXEh2TJLu31xzlFfclRgHaEN?r=0&rs=1&pid=ImgDetMain"
                alt="">
        </div>
        <div class="article-content" v-html="articles.content"></div>
        <div class="article-stats">
            <span>阅读量:{{ articles.read }}</span>
            <span>点赞量:{{ articles.like }}</span>
        </div>
        <div class="comment-section">
            <h3>评论</h3>
            <textarea v-model="commentContent" placeholder="发表评论"></textarea>
            <button @click="submitComment">提交评论</button>
            <div v-for="comment in comments" :key="comment.id">
                <p>{{ comment.content }}</p>
                <span>评论人:{{ comment.author }}</span>
                <span>评论时间:{{ comment.create_time }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import request from '@/request';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import Fenlei from './fenlei.vue';
const route = useRoute()
const articleId = route.params.id
const articles = ref({})
const articleTags = ref([])
const commentContent = ref('')
const comments =ref([])
onMounted(() => {
    if (articleId) {
        getArticle(articleId)
        getComments(articleId)
    }
})
function getArticle(id) {
    request({
        url: `/public/article/${id}/`,
        method: 'get',
    }).then(response => {
        if (response.status == 200) {
            articles.value = response.data.data
            fetchTags(articles.value.tags.map(tag=>tag.id))
            getComments(articles.value.id)
            ElMessage.success('文章数据获取成功')
            console.log(response.data.article)
        }
    }).catch(error => {
        ElMessage.error('文章加载失败' + error.message)
    })
}
function fetchTags(tagIds){
    request({
        url:'/addtag/',
        method:'get'
    }).then(response=>{
        articleTags.value = response.data.tags.filter(tag =>tagIds.includes(tag.id))
    }).catch(error=>{
        ElMessage.error('加载标签失败'+error.message)
    })
}
function getComments(articleId){
    request({
        url:`/public/${articleId}/comments/`,
        method:'get'
    }).then(response=>{
        if(response.status==200){
            comments.value =response.data.comments
            ElMessage.success('评论数据获取成功')
        }
    }).catch(error=>{
        ElMessage.error('评论加载失败'+error.message)
    })
}
function submitComment(){
    if(commentContent.value.trim()==''){
        ElMessage.warning('评论内容不能为空')
        return
    }
    request({
        url:`/public/${articleId}/comments/`,
        method:'post',
        data:{
            content:commentContent.value
        }
    }).then(response=>{
        if(response.status==200){
            commentContent.value=''
            getComments(articleId)
            ElMessage.success('评论提交成功')
        }
    }).catch(error=>{
        ElMessage.error('评论提交失败'+error.message)
    })
}
</script>
<style scoped>
.article-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.article-meta {
    display: flex;
    align-items: center;
    margin: 15px 0;
    color: #666;
}

.article-content {
    line-height: 1.8;
    margin: 20px 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

.article-stats {
    margin-top: 20px;
    color: #999;
}
.comment-section {
    margin-top: 20px;
}

.comment-section textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
}
</style>